<template>
  <div>
    <PsychologicalKnowledgeFormComponent @submit="handleSubmit" />
    <div v-if="responseMessage" class="response-message">
      {{ responseMessage }}
    </div>
    <div>
      <button class="button" @click="refreshKnowledgeList">刷新</button>
    </div>
    <div v-if="knowledgeList && knowledgeList.length > 0">
      <PsychologicalKnowledgeTableComponent :knowledgeList="knowledgeList" @updateKnowledgeList="updateKnowledgeList" />
    </div>
  </div>
</template>

<script setup>
import PsychologicalKnowledgeFormComponent from "@/components/form/right/sunkaixuan/PsychologicalKnowledgeFormComponent.vue";
import PsychologicalKnowledgeTableComponent from "@/components/form/right/sunkaixuan/PsychologicalKnowledgeTableComponent.vue";
import { ref } from 'vue';
import axios from 'axios';

// 存储接收到的 formData
const receivedFormData = ref(null);
// 存储接口响应消息
const responseMessage = ref('');
// 存储从接口获取的知识列表
const knowledgeList = ref([]);

const handleSubmit = (formData) => {
  console.log(formData);
  // 存储接收到的 formData
  receivedFormData.value = formData;
  // 调用后台接口提交表单数据
  callApiSubmitFormData(formData);
  // 调用后台接口获取知识列表
  callApiGetKnowledgeList(formData.consultantId);
};

const callApiSubmitFormData = async (formData) => {
  try {
    const response = await axios.post('http://127.0.0.1:9090/psychologicalKnowledge', JSON.stringify(formData), {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    console.log(response.data);
    // 存储接口响应消息
    responseMessage.value = '操作成功';
    // 可以在这里处理接口返回的数据，例如显示成功消息等
  } catch (error) {
    console.error('调用接口提交表单数据时出错:', error);
    // 存储接口响应消息
    responseMessage.value = '操作失败，请重试';
    // 可以在这里处理错误，例如显示错误消息等
  }
};

const callApiGetKnowledgeList = async (consultantId) => {
  try {
    const response = await axios.get(`http://127.0.0.1:9090/psychologicalKnowledge/selectByConsultantId/${consultantId}`, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    console.log(response.data);
    // 存储从接口获取的知识列表
    knowledgeList.value = response.data.data; // 确保存储的是 data 数组
    // 可以在这里处理接口返回的数据，例如显示成功消息等
  } catch (error) {
    console.error('调用接口获取知识列表时出错:', error);
    // 可以在这里处理错误，例如显示错误消息等
  }
};

const refreshKnowledgeList = async () => {
  // 假设使用之前存储的 consultantId 来刷新列表，如果没有，可以传入一个默认值
  if (receivedFormData.value && receivedFormData.value.consultantId) {
    await callApiGetKnowledgeList(receivedFormData.value.consultantId);
  } else {
    console.warn('没有可用的 consultantId，使用默认值或进行相应处理');
    // 例如使用默认值 1 作为 consultantId
    await callApiGetKnowledgeList(1);
  }
};

// 更新知识列表的方法
const updateKnowledgeList = (newKnowledgeList) => {
  knowledgeList.value = newKnowledgeList;
};
</script>

<style scoped>
.response-message {
  color: red;
  margin-top: 10px;
  font-size: 14px;
}
.button{
  height:25px;
  font-size: 14px;
  background-color: rgba(64,158,255,0.81);
  width: 100px;
  text-align:  center;
  cursor:pointer;
  border-radius: 10px;
  color: white;
  border: none;
  float: none
}
</style>